<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet"
	href="../../css/Semantic-UI-CSS-master/semantic.min.css" />

<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script src="../../js/vue/vue.js"></script>
<script src="../../js/vue/axios.min.js"></script>
<style>
* {
	margin: 0px;
	padding: 0px;
}

.container {
	border: 1px solid;
	height: 100%;
}

.zth-top-text {
	border-bottom: 2px #009E94 solid;
	line-height: 30px;
	padding-left: 20px;
	font-size: 18px;
	font-family: "楷体";
}

.zth-top-border {
	margin-top: 15px;
	margin-left: 18px;
}

.zth-div-border {
	border: 1px #0066CC dotted;
	border-top: 3px rgb(0, 123, 255) solid;
	border-radius: 5px;
	width: 49%;
	margin-right: 10px;
	float: left;
}

.zth-div-border .zth-div-container {
	margin-top: 15px;
}

.zth-div-border label {
	margin-left: 18px;
	font-weight: bold;
}

.zth-div-text {
	margin-left: 5px;
	font-size: 16px;
	font-family: '宋体';
	padding: 10px;
	border-bottom: 1px solid #cccccc;
}

.zth-input-css {
	width: 90%;
	height: 28px;
	margin-left: 20px;
	display:block;
	margin-top: 5px;
	border-radius: 5px;
	border: 1px solid #CCCCCC;
	color: #CCCCCC;
}

.zth-div-but {
	margin-top: 15px;
	margin-left: 18px;
	border-radius: 5px;
	background: rgb(247, 247, 247);
	width: 90%;
	height: 50px;
	margin-bottom: 20px;
}

.zth-div-but button {
	margin-left: 460px;
	margin-top: 10px;
}
</style>
</head>
<body>
	<div id="app" class="container">
		<div class="zth-top-text">登录用户信息</div>
		<div class="zth-top-border">
			<!-- 左中右 -->
			<div class="zth-div-border">
				<div class="zth-div-text">基本信息</div>
				<div>
					<div class="zth-div-container">
						<label>登录名称</label> <input type="text" AUTOCOMPLETE="OFF"
							disabled="disabled" v-model="login_user_name"
							class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>昵称</label> <input type="text" AUTOCOMPLETE="OFF"
							v-model="nick_name" class="zth-input-css">
					</div>
					<div class="zth-div-but">
						<button type="button" @click="nickName"  class="layui-btn layui-btn-primary layui-btn-radius">确认修改</button>
					</div>
				</div>
			</div>
			<div class="zth-div-border">
				<div class="zth-div-text">个人信息</div>
				<div>
					<div class="zth-div-container">
						<label>原密码</label> <input type="password" AUTOCOMPLETE="OFF"
							v-model="login_password" class="zth-input-css">
					</div>
					<div class="zth-div-container">
						<label>新密码</label> <input type="password" AUTOCOMPLETE="OFF"
							v-model="password" class="zth-input-css">
					</div>
					<div class="zth-div-but">
						<button type="button" @click="verify"  class="layui-btn layui-btn-primary layui-btn-radius">确认修改</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../../js/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
	
	layui.use(['jquery', 'layer','upload'], function() {
		upload=layui.upload;
		$ = layui.jquery;

	});
	
			var href=location.href;
			var index=href.indexOf("=");
			var sub=href.substr(index+1,href.length);
			
			new Vue({
				el:"#app",
				data(){
					return{
						login_user_name:'',
						login_password:'',
						nick_name:'',
						password:''

					}
				},
				mounted:function(){
					this.show();
				},
				methods:{
					show:function(){
						axios.get('/ssb/user/findById?id='+sub).then(res=>{
							this.login_user_name=res.data.login_user_name;
							this.nick_name=res.data.nick_name;
						},err=>{
							console.log(err);
						});
					},
					verify:function(){
						var params = new URLSearchParams();
						var param = new URLSearchParams();
						params.append('login_user_name',this.login_user_name);
						params.append('login_password',this.login_password);
						
						param.append('login_user_name',this.login_user_name);
						param.append('login_password',this.password);
						param.append('admin_user_id',sub);
						 if(this.login_password==null || this.login_password==''){
							alert("滚蛋！");
						}else{
							
							var index = layer.confirm('是否确定修改密码', {
								btn: ['继续', "取消"], //按钮
								shade: false, //不显示遮罩
								time: 20000, //20s后自动关闭
							}, function() {
								axios.post('/ssb/user/loginByNameAndPassword',params).then(res=>{
									if(res.data==null || res.data==''){
										alert("原密码不正确！");
									}else{
										axios.post('/ssb/user/deitPassowrd',param).then(res=>{
											
												layui.use(['form', 'jquery'], function() {
													if(res.data>0){
														layer.msg("密码修改成功");
														this.login_password="";
														this.password="";
														axios.get('/ssb/user/logout').then(res=>{
															console.log(res);
															parent.window.location.href="login.html";
														},err=>{
															console.log(res);
														});
													}else{
														layer.msg("修改失败");
													}
												});
											
										},err=>{
											console.log(err);
										})
									}
								},err=>{
									console.log(err);
								});
								//关闭提示框
								layer.close(index);

							},  function() {
								//关闭提示框
								layer.close(index);
							});
							
						} 
					},
					nickName:function(){
						var params = new URLSearchParams();
						params.append('admin_user_id',sub);
						params.append('nick_name',this.nick_name);
						axios.post('/ssb/user/deitPassowrd',params).then(res=>{
							
							layui.use(['form', 'jquery'], function() {
								if(res.data>0){
									layer.msg("修改成功");
								}else{
									layer.msg("修改失败");
								}
							});
							
						},err=>{
							console.log(err);
						})
					}
				}
			});
			
			
			</script>

</body>
</html>
